<!DOCTYPE html>
<html lang="zh"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head >
    <meta charset="utf-8">
    <title>子分类管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/font.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <style>
        .layui-table-body .layui-table-cell{
            line-height: 60px;
            height: 60px;
        }
    </style>
</head>
<body class="ebe-body" >
<div class="layui-fluid" id="ebe-goods">
    <div class="layui-card">
        <div class="layui-card-body ebe-table-full">
            <form class="layui-form ebe-search" >
                <div class="layui-row">
                    <div class="layui-col-md10">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label layui-form-label-sm">子分类名</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="categoryName" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label layui-form-label-sm">状态</label>
                                <div class="layui-input-inline">
                                    <select name="status">
                                        <option value=""></option>
                                        <option value="0">休息</option>
                                        <option value="1">营业</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md2 layui-col-sm12 layui-col-xs12  table-action-area">
                        <div class="layui-btn layui-btn-sm layui-btn-primary table-action" lay-submit lay-filter="data-search-btn" id="query">
                            <i class="layui-icon layui-icon-search"></i>
                        </div>
                        <div class="layui-btn layui-btn-sm layui-btn-primary table-action action-more" shiro:hasAnyPermissions="goodsCategory:update,goodsCategory:delete">
                            <i class="layui-icon layui-icon-unorderedlist"></i>
                        </div>
                    </div>
                </div>
            </form>
            <table class="layui-hide" id="childrenTable" lay-filter="currentTableFilter"></table>
            <script type="text/html" id="currentTableBar">
                <span shiro:lacksPermission="goodsCategory:update,goodsCategory:delete">
        				<span class="layui-badge-dot"></span> 无权限
    				</span>
                <a shiro:hasPermission="goodsCategory:update" class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
                <a shiro:hasPermission="goodsCategory:delete" class="layui-btn layui-btn-xs layui-btn-red data-count-delete" lay-event="delete">删除</a>
            </script>
        </div>

    </div>
</div>
<script src="/lib/layui/layui.js" charset="utf-8"></script>
<script src="/lib/lay-config.js" charset="utf-8"></script>
<script type="text/html" id="shop-status">
    {{#
    var status = {
    1: {title: '启用', color: 'green'},
    0: {title: '禁用', color: 'red'}
    }[d.status];
    }}
    <span class="ebe-badge ebe-tag-{{status.color}}">{{ status.title }}</span>
</script>
<script data-th-inline="javascript">
    layui.use(['form', 'table','layuimini','dropdown','laydate'], function() {
        var $ = layui.jquery,
            form = layui.form,
            layuimini = layui.layuimini,
            dropdown = layui.dropdown,
            parentId = [[${categoryId}]],
            table = layui.table;
        //表格
        layuimini.table.init({
            elem: '#childrenTable',
            url: '/category/goods/childrenList',
            limit: 5,
            where:{
                parentId: parentId
            },
            cols: [
                [
                    {type: "checkbox",width: 50,fixed:"letf"},
                    {field: 'shopInfoId',title: 'ID',type:'numbers'},
                    {field: 'categoryImg',title: '图片',minWidth:140,align:"center",templet:function (d) {
                            if (d.categoryImg !== undefined) {
                                return '<div ><img style="width:auto;height: 60px;" src="'+d.categoryImg+'"></div>';
                            }
                            return '';
                        }},
                    {field: 'categoryName',title: '名称', minWidth:100},
                    {field: 'sortOrder',title: '排序', minWidth:110},
                    {field: 'description',title:'描述',align:"center", minWidth:180,},
                    {title: '状态',templet:"#shop-status",align:"center"},
                    {field: 'createTime',title: '创建时间', minWidth: 180 ,sort: true, align: "center"},
                    {title: '操作', minWidth: 180, templet: '#currentTableBar', fixed:"right",align: "center"}
                ]
            ]
        });
        dropdown.render({
            elem: $('.action-more'),
            click: function (name, elem, event) {
                var checkStatus = table.checkStatus('childrenTable');
                let checkLen = checkStatus.data.length;
                if (name === 'add') {
                    layuimini.model.open('新增子分类', '/category/goods/children/add?parentId='+parentId,{
                        btn: ['提交', '重置'],
                        area: $(window).width() <= 750 ? '95%' : '50%',
                        yes: function (index, layero) {
                            $('#childrenGoods-add').find('#submit').trigger('click');
                        },
                        btn2: function () {
                            $('#childrenGoods-add').find('#reset').trigger('click');
                            return false;
                        }
                    });
                }
                if (name === 'delete') {
                    if (!checkLen) {
                        layuimini.alert.warn('请选择需要删除的子分类');
                    } else {
                        layuimini.modal.confirm('删除子分类', '确定删除所选子分类？', function () {
                            let ids = [];
                            layui.each(checkStatus.data, function (key, item) {
                                ids.push(item.categoryId);
                            });
                            layuimini.delete('/category/goods/' + ids.join(','), function() {
                                table.reload('childrenTable', {
                                    page: {
                                        curr: layuimini.judgeRemoveTablePage('childrenTable',checkLen)
                                    }
                                }, 'data');
                                layuimini.alert.success('删除子分类成功');
                            });
                        });
                    }
                }
            },
            options: [{
                name: 'add',
                title: '新增子分类',
                perms: 'goodsCategory:add'
            }, {
                name: 'delete',
                title: '删除子分类',
                perms: 'goodsCategory:delete'
            }]
        });
        // 监听搜索操作
        form.on('submit(data-search-btn)', function(data) {
            var result = data.field;
            //执行搜索重载
            table.reload('childrenTable', {
                page: {
                    curr: 1
                },
                where: result

            }, 'data');

            return false;
        });
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data,
                layEvent = obj.event;
            if (layEvent === 'delete') {
                layuimini.modal.confirm('删除子分类', '确定删除该子分类？', function() {
                    var curr = $(".layui-laypage-skip").find("input").val(); //当前页码值
                    var len = table.cache['childrenTable'].length;
                    layuimini.delete('/category/goods/' + data.categoryId,function() {
                        if (len === 1 && curr > 1) {
                            curr = curr -1;
                        }
                        table.reload('childrenTable', {
                            page: {
                                curr: curr
                            }
                        }, 'data');
                        layuimini.alert.success('删除子分类成功');
                    });
                });
            }
            if (layEvent === 'edit') {
                layuimini.model.open('修改子分类', '/category/goods/children/update/' + data.categoryId,{
                    area: $(window).width() <= 750 ? '90%' : '50%',
                    btn: ['提交', '取消'],
                    yes: function (index, layero) {
                        $('#childrenGoods-update').find('#submit').trigger('click');
                    },
                    btn2: function () {
                        layer.closeAll();
                    }
                });
            }
        });

    });
</script>
</body>
</html>
